<template xmlns="">
  <div class="container">

    <!-- 内容大盒子 -->
    <div class="boxCenter">

      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">
          <div>
            卫莱电客服管理系统
          </div>

          <div>
            非常nb值得你的信赖
          </div>
        </div>
      </transition>


      <transition name="el-zoom-in-center">
        <div class="form-cont">
          <div style="font-size: 30px;font-weight: bold;margin-left: -550px;margin-bottom: 10px;">账号密码登录</div>
          <div>
            <el-form ref="loginForm" :model="loginForm" class="login-form">

              <!-- 账号密码登录1 -->
              <!-- <div v-if="loginForm.loginType === 'uname'"> -->
                <el-form-item prop="username">
                  <el-input style="width: 500px;"  v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input style="width: 500px;"  v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                    @keyup.enter.native="getCode">

                  </el-input>
                </el-form-item>
                <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
              <!-- </div> -->


              <!-- 下方的登录按钮 -->
              <!-- <el-form-item style="width:100%;"> -->
                <el-button :loading="loading" size="medium" type="primary" style="width:500px;"
                  @click.native.prevent="getCode">
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
              <!-- </el-form-item> -->

              <!--  社交登录 -->
              <!-- <el-form-item style="width:100%;">
                  <div class="oauth-login" style="display:flex">
                    <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
                      <img :src="item.img" height="25px" width="25px" alt="登录" >
                      <span>{{item.title}}</span>
                    </div>
                </div>
              </el-form-item> -->

            </el-form>
          </div>
        </div>
      </transition>



    </div>


    <div class="footer">
      Copyright © 2020-{{ year }} https://api.weilaidian01.com All Rights Reserved.
    </div>
  </div>
</template>

<script>
  import { passwordLogin, verificationCodeLogin, smsLogin } from '@/api/login/login'
export default {
  name: "login",
  // components: {
  //   Verify
  // },
  data() {
    return {
      codeUrl: "",
      captchaEnable: true,
      tenantEnable: true,
      mobileCodeTimer: 0,
      loginForm: {
        loginType: "uname",
        phone: '', //手机号
        password: "", //密码
        rememberMe: true,
      },
      show2: false,
      scene: 21,
      year: '',
      loading: false,
      redirect: undefined,
      // 枚举
      // SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
    };
  },
  created() {
    // 获取今年的年份
    let date = new Date();
    this.year = date.getFullYear();

    this.show2 = true
  },
  mounted() {

  },
  methods: {
    //登录
    getCode() {
      this.loading = true
        let namePem = {}
        namePem.accountNumber = this.loginForm.username
        namePem.password = this.loginForm.password
        // namePem = JSON.stringify(namePem)
        this.$api.customerService_passwordLogin(namePem).then(res => {
          if(res.code ==203){
            this.$message.error(res.msg)
            this.loading = false
            return false
          }
          if (res.code == 200) {
            this.$message({
              message: '登录成功,即将跳转到客服会话页',
              type: 'success'
            });
            this.loading = false
            var that = this
            //存储token
            localStorage.setItem('CustomerToken', JSON.stringify(res.data.token))
            //存储名称
            localStorage.setItem('nickName', JSON.stringify(res.data.nickName))
             //账号名称
             localStorage.setItem('accountNumber', JSON.stringify(res.data.accountNumber))
            
            //存储过期时间
            localStorage.setItem('expireTime', Date.now() + 29 * 24 * 3600 * 1000)

            setTimeout(() => {
              that.$router.push("/PCchatInterface")
            }, 1500);

          } else {
            this.loading = false
          }
        })
          .catch(() => {
            this.loading = false;
          });

    },

  }
};
</script>
<style lang="scss" scoped>
.el-button--info,
.el-button--default,
.el-button--cyan,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger {
  // border: 1px solid #cococo;
  // color: red;
  color: #fff;
  background-color: #23b4b5;
}

.boxCenter {
  width: 100%;
  display: flex;
  align-items: center;
  height: 60%;
  margin: 10% auto;
  // background-color: red;

    // 登录表单样式
    .form-cont {
    width: 38%;
    // background-color: #23b4b5;
    margin-left: 70px;
  }

  .transition-box {

    width: 50%;
    display: flex;
    flex-direction: column;
    color: #fff;
  }


}

.login-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  // background-color: #23b4b5;
}


.container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e6ebf2;
  background-image: url('https://wld001.oss-cn-nanjing.aliyuncs.com/file/2024/06/01/31f3bdb6-938f-417a-950e-3e76a92db051.png');
}

.containers {
  display: flex;
  align-items: center;
}


.footer {
  width: 100%;
  display: flex;
  justify-content: center;

}

// .sms-login-mobile-code-prefix {
//   :deep(.el-input__prefix) {
//     top: 22%;
//   }
// }</style>